<template>
    <div class="manage-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>商品管理</span>
                    <el-button type="primary" @click="handleAdd">添加商品</el-button>
                </div>
            </template>

            <el-table :data="products" v-loading="loading">
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="price" label="价格">
                    <template #default="scope">
                        ¥{{ scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
                            {{ scope.row.status === 'active' ? '在售' : '下架' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button 
                            size="small" 
                            :type="scope.row.status === 'active' ? 'warning' : 'success'"
                            @click="handleToggleStatus(scope.row)"
                        >
                            {{ scope.row.status === 'active' ? '下架' : '上架' }}
                        </el-button>
                        <el-button 
                            size="small" 
                            type="danger" 
                            @click="handleDelete(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 添加/编辑商品对话框 -->
        <el-dialog 
            :title="dialogType === 'add' ? '添加商品' : '编辑商品'" 
            v-model="dialogVisible"
            width="500px"
        >
            <el-form :model="productForm" :rules="rules" ref="productForm" label-width="80px">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="productForm.name"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input-number v-model="productForm.price" :min="0" :precision="2"></el-input-number>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="productForm.description"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit" :loading="submitting">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ProductManage',
    data() {
        return {
            products: [],
            loading: false,
            dialogVisible: false,
            dialogType: 'add', // 'add' or 'edit'
            submitting: false,
            productForm: {
                name: '',
                price: 0,
                description: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入价格', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入商品描述', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.fetchProducts()
    },
    methods: {
        async fetchProducts() {
            this.loading = true
            try {
                const response = await this.$store.dispatch('products/getProducts')
                this.products = response
            } catch (error) {
                this.$message.error('获取商品列表失败')
            } finally {
                this.loading = false
            }
        },
        handleAdd() {
            this.dialogType = 'add'
            this.productForm = {
                name: '',
                price: 0,
                description: ''
            }
            this.dialogVisible = true
        },
        handleEdit(product) {
            this.dialogType = 'edit'
            this.productForm = { ...product }
            this.dialogVisible = true
        },
        async handleSubmit() {
            this.$refs.productForm.validate(async valid => {
                if (valid) {
                    this.submitting = true
                    try {
                        if (this.dialogType === 'add') {
                            await this.$store.dispatch('products/addProduct', this.productForm)
                            this.$message.success('添加成功')
                        } else {
                            await this.$store.dispatch('products/updateProduct', this.productForm)
                            this.$message.success('更新成功')
                        }
                        this.dialogVisible = false
                        this.fetchProducts()
                    } catch (error) {
                        this.$message.error(error.message || '操作失败')
                    } finally {
                        this.submitting = false
                    }
                }
            })
        },
        async handleToggleStatus(product) {
            try {
                await this.$store.dispatch('products/toggleProductStatus', product.id)
                this.$message.success('状态更新成功')
                this.fetchProducts()
            } catch (error) {
                this.$message.error('操作失败')
            }
        },
        async handleDelete(product) {
            try {
                await this.$confirm('确定要删除该商品吗？', '提示', {
                    type: 'warning'
                })
                await this.$store.dispatch('products/deleteProduct', product.id)
                this.$message.success('删除成功')
                this.fetchProducts()
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败')
                }
            }
        }
    }
}
</script>

<style scoped>
.manage-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-button + .el-button {
    margin-left: 10px;
}
</style> 